<template>
	<div class="swiper-box" :style="'padding-bottom:'+height+'%'">
		<div class="swiper-item" :class="mode" :style="'height:'+height+'%;padding-bottom:'+height+'%;background-image:url('+datas[0].pic+');'"></div>
	</div>
</template>

<script>
export default {
	props: {
		height: {
			type: Number,
			default: 50
		},
		datas:{
			type: Array,
			default: ()=>{
				return [{pic:'static/swiper.png'}]
			}
		},
		mode:{
			type: String,
			default: 'scaleToFill'
		}
	},
	data() {
		return {
		}
	},
	mounted() {
		
	},
	methods: {
		
	}
}
</script>

<style lang='less'>
	.swiper-box {
		position: relative;
		height: 0;
		overflow:hidden;
		border-radius: 5px;
		.swiper-item {
			text-align: center;
			background-repeat: no-repeat;
		}
	}
	.scaleToFill{
		background-size:100% 100%;
	}
	.aspectFit{
		background-size:contain;
		background-position:center;
	}
	.aspectFill{
		background-size:cover;
		background-position:center;
	}
</style>